<template>
    <div id="app">
        <canvas id="appCanvas" ref="appCanvas"></canvas>
        <router-view></router-view>
    </div>
</template>

<script>
  export default {
    name: 'GCMS',
    mounted: function () {
      var canvas = document.getElementById('appCanvas')
      var ctx = canvas.getContext('2d')
      ctx.rotate(-20 * Math.PI / 180)
      ctx.fillStyle = 'rgba(100,100,100,0.20)'
      ctx.font = '14px Arial'
      ctx.fillText('Hello GCMS!', 20, 120)
      var data = canvas.toDataURL('image/png', 1)
      var app = document.getElementById('app')
      app.style.backgroundImage = 'url(' + data + ')'
    },
    methods: {},
    beforeCreate () {
    },
    created () {
      //在页面加载时读取localStorage里的状态信息
      localStorage.getItem("gcms")
      && this.$store.replaceState(Object.assign(this.$store.state, JSON.parse(localStorage.getItem("gcms"))));
      //在页面刷新时将vuex里的信息保存到localStorage里
      window.addEventListener("beforeunload", () => {
        localStorage.setItem("gcms", JSON.stringify(this.$store.state))
      })
    }
  }
</script>

<style>
    /* CSS */
    * {
        margin: 0;
        padding: 0;
        float: none;
    }

    html, body, #app {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    #appCanvas {
        position: absolute;
        width: 300px;
        height: 150px;
        display: none;
    }

    /* element ui样式重写 */
    .el-table,
    .el-table th, .el-table tr {
        background: none !important;
    }

    /* google 浏览器滚动条 */
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #5cadff;
        border-radius: 3px;
    }
</style>
